Chart Control এবং Data Table Filtering হল এমন একটি প্রক্রিয়া যেখানে আপনি Google Charts API এর মাধ্যমে প্রদর্শিত ডেটা ফিল্টার বা নিয়ন্ত্রণ করতে পারেন। এর মাধ্যমে চার্টে কেবল নির্দিষ্ট ডেটা বা কলামগুলো প্রদর্শিত হতে পারে এবং ইউজারের জন্য ডেটা ভিজুয়ালাইজেশন আরও ইন্টারঅ্যাকটিভ এবং কার্যকরী হয়ে ওঠে।

এখানে আমরা Google Charts API এর মাধ্যমে Data Table Filtering এবং Chart Control কিভাবে ব্যবহার করা যায় তার একটি উদাহরণ দেখব।

Chart Control এবং Data Table Filtering এর উদাহরণ

Step 1: Angular প্রজেক্ট তৈরি করা

প্রথমে একটি নতুন Angular প্রজেক্ট তৈরি করুন (যদি ইতিমধ্যে তৈরি থাকে, তবে সেটি ব্যবহার করতে পারেন):

ng new chart-control-filter-example
cd chart-control-filter-example

Step 2: Google Charts লাইব্রেরি ইন্সটল করা

এখন angular-google-charts প্যাকেজটি ইন্সটল করতে হবে:

npm install angular-google-charts

Step 3: GoogleChartsModule ইমপোর্ট করা

এখন, আপনার অ্যাপ্লিকেশনে GoogleChartsModule ব্যবহার করতে, app.module.ts ফাইলে এটি ইমপোর্ট করুন:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { GoogleChartsModule } from 'angular-google-charts'; // GoogleChartsModule ইমপোর্ট করুন

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    GoogleChartsModule // এখানে GoogleChartsModule যোগ করুন
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 4: Data Table Filter এবং Chart Control সেটআপ

এখন, আমরা একটি Column Chart তৈরি করব এবং একটি ডেটা টেবিলের মাধ্যমে ফিল্টার করব। এটি একটি ইন্টারঅ্যাকটিভ চিত্র তৈরি করবে যেখানে ইউজার ডেটার কিছু অংশ দেখতে বা ফিল্টার করতে পারবেন।

app.component.ts ফাইল:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'Chart Control and Data Table Filter';

  chartType = 'ColumnChart'; // Chart Type

  // Initial Chart Data
  chartData = [
    ['City', '2010', '2020'],
    ['New York', 8175133, 8398748],
    ['Los Angeles', 3792621, 3990456],
    ['Chicago', 2695598, 2705994],
    ['Houston', 2129784, 2296224],
    ['Phoenix', 1445632, 1680992]
  ]; // Chart Data

  chartOptions = {
    title: 'City Population Comparison',
    hAxis: { title: 'City' },
    vAxis: { title: 'Population' },
    legend: { position: 'top' }
  };

  // Filtered Data
  filteredData: any;

  constructor() {}

  ngOnInit(): void {
    // Initially setting filtered data to show all data
    this.filteredData = this.chartData;
  }

  // Function to filter the data based on selected year
  filterData(year: string) {
    const yearIndex = year === '2010' ? 1 : 2;
    this.filteredData = this.chartData.filter((row, index) => {
      if (index === 0) return true; // Keep the header row
      return row[yearIndex] > 2500000; // Filter cities with population greater than 2.5M
    });
  }
}

app.component.html ফাইল:

<h1>{{ title }}</h1>

<!-- Filter Options -->
<select (change)="filterData($event.target.value)">
  <option value="2010">2010 Population</option>
  <option value="2020">2020 Population</option>
</select>

<!-- Google Chart Component -->
<google-chart 
  [type]="chartType" 
  [data]="filteredData" 
  [options]="chartOptions">
</google-chart>

ব্যাখ্যা:

1. chartData:
   এটি চার্টের মূল ডেটা যা শহরের জনসংখ্যা (২০১০ এবং ২০২০) দেখাচ্ছে। প্রথমে সব ডেটা দেখানো হবে, তবে ইউজার যদি কোনো নির্দিষ্ট বছর নির্বাচন করে, তখন আমরা filterData() ফাংশনের মাধ্যমে ডেটা ফিল্টার করব।
2. filterData(year):
   এটি একটি ফাংশন যা বছর অনুযায়ী ফিল্টার করবে। যদি 2010 নির্বাচন করা হয়, তবে 2010 বছরটির ডেটার উপর ভিত্তি করে ফিল্টার হবে, আর যদি 2020 বছর নির্বাচন করা হয়, তবে 2020 বছরটির ডেটা ফিল্টার হবে।
3. filteredData:
   এই ভেরিয়েবলটি ফিল্টার করা ডেটা ধারণ করে, যা Google Chart কম্পোনেন্টে প্রদর্শিত হবে।
4. chartOptions:
   এখানে চার্টের টাইটেল, অক্ষ এবং লেজেন্ড কাস্টমাইজ করা হয়েছে।
5. UI Control (Dropdown):
   ড্রপডাউন মেনুর মাধ্যমে ইউজার 2010 বা 2020 বছর নির্বাচন করতে পারে, এবং সেই অনুযায়ী চার্টের ডেটা ফিল্টার হবে।

Chart Control Implementation

এছাড়া, আপনি Chart Control ব্যবহার করে চার্টের অন্যান্য নিয়ন্ত্রণও যুক্ত করতে পারেন, যেমন:

• Zoom In/Out
• Data Points Selection
• Interactive Legends (যেখানে ইউজার লেজেন্ড ক্লিক করলে নির্দিষ্ট ডেটা বা সেগমেন্ট দেখা যাবে)

এগুলো সাধারণত Google Charts API তে যুক্ত করা যায় সহজেই। উদাহরণস্বরূপ:

chartOptions = {
  selectionMode: 'single', // Allows users to select one data point
  tooltip: {
    trigger: 'selection' // Tooltip shows when a user selects a data point
  }
};

এটি চার্টের সাথে আরও Interactive কন্ট্রোল যোগ করবে।

সারাংশ

Chart Control এবং Data Table Filtering ব্যবহার করে আপনি চার্টের ডেটা কাস্টমাইজ এবং নিয়ন্ত্রণ করতে পারেন। Google Charts API এবং Angular ব্যবহার করে, আপনি ডেটাকে ফিল্টার করতে পারেন এবং ইউজারের ইন্টারঅ্যাকশনের মাধ্যমে চার্ট কাস্টমাইজেশন করতে পারেন। এটি চার্টের ব্যবহারকারীর অভিজ্ঞতা আরও ইন্টারঅ্যাকটিভ এবং কার্যকরী করে তোলে।